import { React, useState } from "react";
import { SheetComponent } from "@antv/s2-react";
import "@antv/s2-react/dist/style.min.css";
import "./index.css";
import { Menu } from "antd";

function S2() {
  const [type, setType] = useState("pivot");
  const data = [
    {
      province: "浙江",
      city: "杭州",
      type: "笔",
      price: "1",
      cost: "0.5",
    },
    {
      province: "浙江",
      city: "杭州",
      type: "纸张",
      price: "2",
      cost: "1",
    },
    {
      province: "浙江",
      city: "舟山",
      type: "笔",
      price: "17",
      cost: "15",
    },
    {
      province: "浙江",
      city: "舟山",
      type: "纸张",
      price: "6",
      cost: "4",
    },
    {
      province: "吉林",
      city: "长春",
      type: "笔",
      price: "8",
      cost: "5",
    },
    {
      province: "吉林",
      city: "白山",
      type: "笔",
      price: "12",
      cost: "8",
    },
    {
      province: "吉林",
      city: "长春",
      type: "纸张",
      price: "3",
      cost: "2",
    },
    {
      province: "吉林",
      city: "白山",
      type: "纸张",
      price: "25",
      cost: "18",
    },
  ];
  const meta = [
    // 列头字段对应的元信息，比如展示的中文名
    {
      field: "province",
      name: "省份",
    },
    {
      field: "city",
      name: "城市",
    },
    {
      field: "type",
      name: "类型",
    },
    {
      field: "price",
      name: "价格",
    },
    {
      field: "cost",
      name: "成本",
    },
  ];
  const s2DataConfig = {
    fields: {
      rows: ["province", "city"],
      columns: ["type"],
      values: ["price", "cost"],
    },
    data,
    meta,
  };
  const s2Options = {
    width: 700,
    height: 230,
  };
  const s2Options2 = {
    width: 700,
    height: 300,
    showSeriesNumber: true,
  };

  const s2DataConfig2 = {
    fields: {
      columns: ["province", "city", "type", "price", "cost"], // 要展示的列头字段 id 列表
    },
    meta,
    data,
  };

  const items = [
    {
      label: "透视表",
      key: "pivot",
    },
    {
      label: "明细表",
      key: "table",
    },
  ];

  const onClick = ({ key }) => {
    setType(key);
  };
  return (
    <div id="container">
      <div className="menu">
        <Menu
          onClick={onClick}
          defaultSelectedKeys={["pivot"]}
          mode="horizontal"
          items={items}
        />
      </div>
      {type === "pivot" && (
        <SheetComponent id="pivot" dataCfg={s2DataConfig} options={s2Options} />
      )}
      {type === "table" && (
        <SheetComponent
          id="table"
          sheetType="table"
          dataCfg={s2DataConfig2}
          options={s2Options2}
        />
      )}
    </div>
  );
}

export default S2;
